<template>
<div class='g-content-wrapper'>
<header-top>急涨急跌</header-top>
<div class="g-content">
  <state></state>

  <tab-bar :on-selected="tabBarSelected"></tab-bar>
  <chart-connect :option="chartConnectOption" :chart-data="chartConnectData" :aid="tabBarIndex"></chart-connect>

  <div class="interval"></div><!--间隔-->
  <stock-distri :options="stkDistriOpts" :data="stkDistriData"></stock-distri>
  <div class="interval"></div><!--间隔-->

  <div class="list-title">
    <label class="g-font-f2">当前急涨急跌股票</label>
    <span class="g-font-f5">更新于{{listUpdateTime | dataTimeFormat12}}</span>
  </div>
  <tab-bar :tab-bar="typeTabBar" :on-selected="typeBarSelected"></tab-bar>
  <detail-list :list-type="listType" :list-data="listData" :head-content = 'headContent' :down="down">
  </detail-list>

  <div class="interval"></div><!--间隔-->
  <div class='comment'>
    <h1 class='comment-title'>急涨急跌</h1>
      <p>通过跟踪两市2000多只股票在最近一段时间内价格的大幅变动，来追踪整个市场个股急涨急跌情况。本质上是一个市场上投资者们乐观或恐慌情绪的体现。<br/>
            本功能中定义的急涨急跌是指：1分钟内涨幅（或跌幅）大于2%，2分钟内涨幅（或跌幅）大于3%。</p>
  </div>
</div>
</div>
</template>

<script>
import headerTop from '@/pages/common/HeaderTop'
import state from '@/pages/common/State'
import tabBar from '@/pages/common/TabBar'
import stockDistri from '@/pages/common/StockDistri'
import detailList from '@/pages/common/DetailList'
import chartConnect from '@/pages/common/ChartConnect'

import remoteDAO from '@/common/remoteDAO'
import constant from '@/common/constant'
import { Loop } from '@/common/polling'
import { dataTimeFormat12 } from '@/filters/dataTime'

export default {
  name: 'rapid-change',
  components: {
    headerTop,
    state,
    tabBar,
    chartConnect,
    detailList,
    stockDistri
  },
  data () {
    return {
      down: 0,
      tabBarIndex: 0,
      typeBarIndex: 0,
      typeTabBar: [{
        name: '急涨'
      }, {
        name: '急跌'
      }],
      headContent: ['名称/代码', '最新价', '1min涨幅', '2min涨幅'],

      chartConnectOption: {
        accTitle: '累计净急涨急跌',
        accPositiveText: '净急涨数',
        accNegativeText: '净急跌数',
        mTitle: '分钟急涨急跌',
        mNetPositiveText: '净急涨数',
        mNetNegativeText: '净急跌数',
        mPositiveText: '急涨',
        mNegativeText: '急跌'
      },
      chartConnectData: {},
      listType: 'd',
      listData: [],
      listUpdateTime: '15:00',

      stkDistriOpts: {
        title: '急涨急跌股票分布',
        positiveText: '急涨股票数量',
        negativeText: '急跌股票数量'
      },

      stkDistriData: {}
    }
  },
  filters: {
    dataTimeFormat12
  },
  methods: {
    tabBarSelected (index) {
      this.tabBarIndex = index;
      this.fetchRapData();
      this.fetchModData();
    },
    typeBarSelected (index) {
      this.typeBarIndex = index;
      this.fetchStkData();
    },

    async fetchRapData () {
      this.$store.dispatch('showLoading');

      try {
        const [index, rapid] = await Promise.all([
          remoteDAO.getIndexMinList(['sh', 'sh', 'sz', 'cyb'][this.tabBarIndex]),
          remoteDAO.invoke(
            constant.InterfaceEnum.GET_RAPID_CHG,
            { type: this.tabBarIndex }
          )])

        this.chartConnectData = {
          xTime: rapid.xtime,
          netNumber: rapid.jingJz,
          minute: {
            in: rapid.minJz,
            out: rapid.minJd.map(v => -v),
            mNetNumber: rapid.minJz.map((v, i) => v - rapid.minJd[i])
          },
          indexData: index.data
        }
      } catch (err) {
        this.$store.dispatch('showError');
      }
    },

    async fetchModData () {
      try {
        const res = await remoteDAO.invoke(
          constant.InterfaceEnum.GET_RAPID_MO_CHG,
          null
        );

        this.stkDistriData = res;
      } catch (err) {
        console.log(`ERROR: ${err}`)
      }
    },

    async fetchStkData () {
      try {
        const res = await remoteDAO.invoke(
            constant.InterfaceEnum.GET_RAPID_STOCK,
            { type: this.typeBarIndex }
        );

        this.down = this.typeBarIndex;
        this.listData = this.typeBarIndex ? res.down : res.up;
        this.listUpdateTime = res.time;
      } catch (err) {
        console.log(`ERROR: ${err}`)
      }
    },

    transitionDone () {
      Loop.getInstance().register(this.fetchRapData, this.fetchModData, this.fetchStkData);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import '../../assets/css/common.less';
.list-title {
  text-align: left;
  margin-left: 0.15rem;
}

.list-title{
  padding-top: .15rem;
}
</style>
